<template>
    <div class="organization public">
       <el-breadcrumb separator=">" class="crumbs">
					<el-breadcrumb-item :to="{ path: '/organization'}">机构列表</el-breadcrumb-item>
					<el-breadcrumb-item :to="{ path: '/reaactOrganization'}">编辑列表信息</el-breadcrumb-item>
				</el-breadcrumb>

        <!-- 机构树形结构 -->
        <el-button @click="append" class="addNewOrg"  v-if="s.indexOf('rbac:organization:add') != -1">添加新机构</el-button>
    <el-tree
    class="tree"
    v-if="treeIsShow"
  :data="tree"
  :props="defaultProps"
  node-key="id"
  :expand-on-click-node="false"
  :render-content="renderContent">
</el-tree>
    </div>
</template>
<script>
export default{
    name:'organization',
    data() {
      return {
        s : this.permissions,
        tree: [],
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        treeIsShow:false
      }
    },

    methods: {
      // 添加组织
      append(store, data) {
        this.$router.push({
          path:'/addOrganization',
          query:{
            id : data?data.id:'无'
          }
        })
      },
      // 删除
      remove(store, data) {
        if(data.children && data.children.length > 0){
          this.$message({
            type:'warning',
            message:'该机构有下级，不能删除！',
            duration:1500,
            showClose:true
          })
        }else{

          this.$confirm('是否删除此组织', '提示', {
            confirmButtonText: '删除',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            $.post(this._path + '/organizations/' + data.id + '/delete',(res)=>{
              if(res.code == 'SUCCESS'){
                store.remove(data);
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                });
                // 重新拉取列表
                this.$http.get(this._path + '/organizations/tree',{}).then((res)=>{
                  if(res.data.code == 'SUCCESS'){
                      this.tree = res.data.data.tree;
                    if(this.tree.length <= 0){
                      this.treeIsShow = false;
                    }else{
                      this.treeIsShow = true;
                    }
                  }else{
                    this.requestError(res,this)
                  }

                })
              }else{
                this.requestError(res,this)
              }
            })

          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });

        }
      },
      // 编辑
      redact (store,data) {
        this.$router.push({
          path:'redactOrganization',
          query:{
            id:data.id
          }
        })

      },
      // 渲染jsx语法格式
      renderContent(h, { node, data, store }) {
        let add = null,edit = null,del = null;
        if(this.permissions.indexOf('rbac:organization:add') != -1){
          add = <el-button size="mini" on-click={ () => this.append(store, data) }>添加</el-button>;
        }
        if(this.permissions.indexOf('rbac:organization:edit') != -1){
          edit = <el-button size="mini" on-click={ () => this.redact(store, data) }>编辑</el-button>;
        }
        if(this.permissions.indexOf('rbac:organization:delete') != -1){
          del = <el-button size="mini" on-click={ () => this.remove(store, data) }>删除</el-button>;
        }
        return (
          <span>
            <span>
              <span>{node.label}</span>
            </span>
            <span style="float: right; margin-right: 20px">

           {add}{edit}{del}
            </span>
          </span>);
      }
    },
    beforeCreate () {
      this.$http.get(this._path + '/organizations/tree',{}).then((res)=>{
        if(res.data.code == 'SUCCESS'){
            this.tree = res.data.data.tree;
          if(this.tree.length <= 0){
            this.treeIsShow = false;
          }else{
            this.treeIsShow = true;
          }
        }else{
          this.requestError(res,this)
        }

      })
    }
}
</script>

<style lang="scss" scoped>
@import './../style/public.scss';
@import './../style/organization.scss'
</style>
